<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf8">
    <title>模板插值</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="myapp">
        <div style="text-align: center;">
            <!-- 模板插值 -->
            <!-- {{}} -->
            <!-- 模板插值替换 -->
            <h1>这是模板的内容 这是第{{count}}次点击</h1>
            <!-- 模板指令 -->
            <!-- v-html -->
            <!-- 插值html -->
            <!-- <h1>这是模板的内容 这是第<span v-html="count_red_html"></span>次点击</h1> -->
            <!-- v-on -->
            <!-- 绑定方法 -->
            <button v-on:click="click_button">按钮</button>
            <!-- v-bind -->
            <!-- 绑定属性 -->
            <h1 v-bind:id="id1">id为1</h1>
        </div>
    </div>
    <script>
        //定义一个vue组件,名为app
        const app = {
            //组件中的数据
            data() {
                return {
                    //计数器
                    count: 0,
                    //插值html语句
                    count_red_html: '<span style="color: red;">0</span>',
                    id1: "id1"
                }
            },
            //组件中的方法
            methods: {
                //按钮点击
                click_button() {
                    this.count += 1;
                }
            }
        }
        //绑定组件到元素上
        Vue.createApp(app).mount("#myapp")
    </script>
</body>

</html>